﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>加载方式</title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../scripts/footer.js"></script>
    <script src="../src/js/rayui.js" use="code"></script>
    <script src="../scripts/common.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 15px;
            padding-top: 40px;
        }
    </style>
</head>
<body>

    <h2>说明</h2>
    <div class="card card-color-orange">
        rayui是在jquery的基础上开发的，依赖jquery，所以加载的时候需要先引入jquery，项目开发使用的jquery版本为1.12.4
    </div>


    <h2>加载方式</h2>
    <h3 class="spliter">1、使用use函数异步加载</h3>
    <div class="card">
        这种方式和layui没有什么区别，不过代码实现上写的有点差，实际测试加载没有layui加载的快，总是慢10几毫秒，这种加载方式均为异步加载
    </div>


<pre class="rayui-code rayui-even" data-options='{"encode": true, "title": "异步加载"}'>

rayui.use(["",""], function(){
    //你的代码
})

</pre>


    <h3 class="spliter">2、script标签use属性同步加载</h3>
    <div class="card">
        严格来说不应该叫同步加载，因为它的加载方式依赖rayui.js的加载方式
    </div>
    <div class="card">
        rayui.ready的实现是在jquery.ready的基础上实现的，所以此时dom已经加载完毕，所以代码里没有必要再嵌入一级$(function(){})了，不过嵌入也没关系^-^
    </div>

    <div class="card">
        这种加载方式一定要用rayui.ready，不能使用jquery的ready函数，因为有可能组件没有加载完毕就进行了使用，此时组件对象为空
    </div>
    <pre class="rayui-code rayui-even" data-options='{"encode": true, "title": "同步加载"}'>
&lt;script src="../src/js/rayui.js" use="form,select,checkbox">&lt;/script>
......

&lt;script>
    rayui.ready(function(){
        var checkbox = form.checkbox;
        ........

    });

&lt;/script>
</pre>



    <h2>rayui内置函数</h2>
    <table class="raytable" ray-even>
        <thead>
            <tr>
                <th>函数名</th>
                <th>参数</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>log: function (msg)</td>
                <td>msg：打印信息</td>
                <td>控制台打印，内部调用console.log函数</td>
            </tr>
            <tr>
                <td>codeTime: function (msg, func)</td>
                <td>
                    msg：信息名称<br />
                    func：代码段
                </td>
                <td>
                    代码耗时统计，这里只统计了时间
                </td>
            </tr>
            <tr>
                <td>isInclude: function (name)</td>
                <td>
                    name：js或css名称<br />
                </td>
                <td>
                    判断是否引用，引用返回true，否则返回false
                </td>
            </tr>
            <tr>
                <td>loadScript: function (url, onsuccess, onerror)</td>
                <td>
                    url：js路径<br />
                    onsuccess：js加载成功时调用<br />
                    onerror：js加载失败时调用<br />
                </td>
                <td>
                    页面加载js
                </td>
            </tr>
            <tr>
                <td>loadCss: function (url, onsuccess, onerror)</td>
                <td>
                    url：css路径<br />
                    onsuccess：css加载成功时调用<br />
                    onerror：css加载失败时调用<br />
                </td>
                <td>
                    页面加载js
                </td>
            </tr>
            <tr>
                <td>config: function (options)</td>
                <td>
                    options：object对象，支持属性包括如下：<br /><br />
                    virtualPath：虚拟目录
                </td>
                <td>
                    全局配置
                </td>
            </tr>
            <tr>
                <td>bindDocEvt: function (plugin, func)</td>
                <td>
                    plugin：组件名<br /><br />
                    func：回调方法
                </td>
                <td>
                    为document绑定事件，配合toggleDocEvt函数一起使用，用来解决不同组件间调度，比如select和selecttree组件点击document控制下拉显隐
                </td>
            </tr>
            <tr>
                <td>toggleDocEvt: function ()</td>
                <td>
                </td>
                <td>
                    逐一调用bindDocEvt函数绑定的事件
                </td>
            </tr>
            <tr>
                <td>jsAsync: function ()</td>
                <td>
                </td>
                <td>
                    判断当前js是否是异步，开发组件时使用此参数可实现同步加载组件
                </td>
            </tr>
            <tr>
                <td>define: function (uses, callback, async)</td>
                <td>
                    uses：调用其他组件，可选数组|字符串<br />
                    callback：回调函数，当use模块加载完毕后调用<br />
                    async: 是否异步加载，基本上是固定值：rayui.jsAsync()<br />
                </td>
                <td>
                    组件开发时使用
                </td>
            </tr>
            <tr>
                <td>use: function (uses, callback, async)</td>
                <td>
                    uses：调用其他组件，可选数组|字符串<br />
                    callback：回调函数，当use模块加载完毕后调用<br />
                    async: 一般不会用到此参数，rayui内部使用用来实现组件的同步加载<br />
                </td>
                <td>
                    组件开发时使用
                </td>
            <tr>
                <td>random: function (min, max, decimal)</td>
                <td>
                    min：最小值<br />
                    max：最大值<br />
                    decimal：小数位数<br />
                </td>
                <td>
                    产生随机数
                </td>
            </tr>
            <tr>
                <td>setCookie: function (name, value, expires, path, domain, secure)</td>
                <td>
                    name：cookie key<br />
                    value：cookie 值<br />
                    expires：过期时间，单位毫秒<br />
                    path：作用路径<br />
                    domain：作用域<br />
                    secure：是否加密<br />
                </td>
                <td>
                    设置cookie
                </td>
            </tr>
        <tr>
            <td>getCookie: function (name)</td>
            <td>
                name：cookie key
            </td>
            <td>
                获取cookie
            </td>
        </tr>
        <tr>
            <td>delCookie: function (name, path, domain)</td>
            <td>
                name：cookie key<br />
                path：作用路径<br />
                domain：作用域<br />
            </td>
            <td>
                删除cookie
            </td>
        </tr>
        </tbody>
    </table>
    
    
<h2>rayui回调函数</h2>
<table class="raytable" ray-even>
    <thead>
    <tr>
        <th>函数名</th>
        <th>参数</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>ready: function()</td>
            <td></td>
            <td>当rayui加载完成时回调，当script标签使用use时，组件全部加载完后回调，此时dom对象已经加载完毕</td>
        </tr>
        <tr>
            <td>onLoadModule: function(moduleName)</td>
            <td>
                moduleName：组件名字<br />
            </td>
            <td>
                当各个组件加载完毕后回调，注意这里没有做过滤，重复组件虽然不会重复加载，但此回调函数会发生多次调用
            </td>
        </tr>
    </tbody>
</table>

<h2>类型函数扩展</h2>
    <table class="raytable" ray-even>
        <thead>
            <tr>
                <th>对象</th>
                <th>扩展函数</th>
                <th>参数</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Date</td>
                <td>format: function(format)</td>
                <td>
                    format：<br />
                    年(y)可以用 1-4 个占位符，<br />
                    月(M)、日(d)、小时(H)、分(m)、秒(s)可以用 1-2 个占位符，<br />
                    毫秒(f)可以用 1-3 个占位符
                </td>
                <td>
                    Date 转化为指定格式的String<br />
                    例子：<br />
                    (new Date()).Format("yyyy-MM-dd hh:mm:ss.fff") ==> 2006-07-02 08:09:04.423<br />
                    (new Date()).Format("yyyy-M-d h:m:s.ff")      ==> 2006-7-2 8:9:4.18
                </td>
            </tr>
            <tr>
                <td>Array</td>
                <td>raysort: function (key, desc)</td>
                <td>
                    key： 排序字段<br />
                    desc： 是否倒序排序，不填或false正序，true倒序<br />
                </td>
                <td>
                    排序<br />
                    数组数据必须是object对象，不能是简单数据类型
                </td>
            </tr>
            <tr>
                <td>Array</td>
                <td>rayIndexOf: function (key, val, startIndex)</td>
                <td>
                    key： 排序字段<br />
                    val： 可选数值|function(value)，value为当前值，函数返回true|false<br />
                    startIndex： 开始序号<br />
                </td>
                <td>
                    获取数组index<br />
                    数组数据必须是object对象，不能是简单数据类型
                </td>
            </tr>
            <tr>
                <td>Array(部分浏览器)</td>
                <td>indexOf: function (val)</td>
                <td>
                    val： 数值<br />
                </td>
                <td>
                    获取一位数组index，部分浏览器（如IE8）没有indexOf函数，会自动扩展该函数<br />
                </td>
            </tr>
        </tbody>
    </table>


    

<h2>组件开发</h2>
<div class="card">
    使用define函数进行组件开发，和layui一样，不同的是增加了一个参数，同步异步标记rayui.jsAsync()
</div>
<div class="card">
    rayui.jsAsync()参数不能省略，否则无法使用上面的第2种同步加载方式
</div>
<div class="card">
    为了解决组件间的协调，document的点击事件可以使用rayui.bindDocEvt(pluginName, callback)和rayui.toggleDocEvt()函数进行协调。比如：select组件点击document需要同时隐藏select下拉和calender的下拉
</div>
<pre class="rayui-code rayui-even" data-options='{"encode": true, "title": "组件开发"}'>

 ;rayui.define(["jqlibs", "layer"], function (exports, undef) {
    "use strict";

        //你的组件代码

        rayui.bindDocEvt(pluginName, callback); //绑定doc的click事件
        rayui.toggleDocEvt(); //触发doc的click事件



}, rayui.jsAsync()); //rayui.jsAsync()参数不能省略，否则无法使用上面的第2中同步加载方式

</pre>



    <script>
        rayui.ready(function () {
            var code = rayui.code;
            code.render();
        })
    </script>

</body>
</html>